﻿<!DOCTYPE html>
<html>
<head>
    <title>链接列表</title>
    <!--<script src="script.js"></script>-->
    $css()
    <style type="text/css">
        .ui-autocompletion-panel {
            line-height: 20px;
        }
        td.parent{ font-weight: bold;padding:0.4em 0 0.4em 1em;}
        .ui-table tr td.child{ padding-left: 2em;}
        span.micro{ font-weight: normal;margin-left: 0.5em;}
    </style>
</head>
<body>
<div class="autoStyle">
    <table cellpadding="0" cellspacing="0" width="100%">
        <tr>
            <td width="350" valign="top" class="control">
                <div class="top">
                    <div class="list-menu" id="list-menu">
                        <span class="icon"></span>菜单
                        <div class="drop">
                            <a href="javascript:;" class="fn item" fn="create">$icon(create)创建</a>
                            <a href="javascript:;" class="fn item last" fn="refresh">$icon(refresh)刷新列表</a>
                        </div>
                    </div>
                </div>

                <div class="main autoHeight">

                    <div id="plist" style="height: 100%; overflow: auto;"></div>
                </div>
                <div class="ui-table-meta" id="pager">共-条</div>
            </td>
            <td>
                <div id="pl" class="relative autoHeight autoScroll"></div>
            </td>
        </tr>
    </table>
</div>


<script type="text/template" id="tpl">
        <div class="item" onclick="Fn.edit('{id}')">
            <a href="javascript:;"><span>$icon(edit)</span>修改</a>
        </div>
        <div class="item" onclick="menu.setvisible('{id}')">
            <a href="javascript:;"><span></span>{state}</a>
        </div>
        <div class="line"></div>
        <div class="item" onclick="menu.del('{id}')">
            <a href="javascript:;"><span>$icon(delete)</span>删除</a>
        </div>
    </script>

    $js()
    <script type="text/javascript">

        var listMenu = jr.$('list-menu');
        jr.hover(listMenu);

        //初始化表格
        jr.initTable = function (table, multSelected, clickCall) {
            jr.table.dynamic(table, multSelected, function (trs) {
                window.Fn.ids = new Array();
                var id;
                for (var i = 0; i < trs.length; i++) {
                    if (trs[i].getAttribute('indent')) {
                        id = trs[i].getAttribute('indent').replace(/\s/, '');
                        window.Fn.ids.push(id);
                    }
                }
                if (clickCall && window.Fn.ids.length != 0) {
                    clickCall();
                }
            });
        };

        Fn.table = null;

        //刷新页面
        Fn.refresh = function () { Fn.loadData(); };

        //初始化表格及修改事件
        Fn.initTable = function () {
            var tables = document.getElementsByTagName('TABLE');
            if (tables.length >= 2) {
                Fn.table = tables[1];
                //默认加载第一个栏目
                if (jr.$('pl').innerHTML == '') {
                    var rows = Fn.table.rows;
                    if (rows.length > 0) {
                        var id = rows[0].childNodes[0].innerHTML;
                        jr.load2('pl', 'link', 'edit', 'disabled=true&link_id=' + id);
                    }
                }

                jr.each(Fn.table.getElementsByTagName('TD'), function (i, e) {
                    jr.contextmenu.bind(e, '', function (menu) {
                        var id = e.parentNode.getAttribute('indent');
                        var state = e.parentNode.getAttribute('visible') == '1' ? '<em style="color:#333;font-style:normal">停用(隐藏)</em>' : '启用(显示)';
                        menu.innerHTML = jr.template(jr.$('tpl').innerHTML, { id: id, state: state });
                    });
                });

                jr.initTable(Fn.table, false, function () {
                    Fn.edit(Fn.ids[Fn.ids.length - 1]);
                });
            }
        };

        //加载数据
        Fn.loadData = function (page) {
            var _page = page || 1;
            jr.pagerLoad('plist', 'pager', _page, 'link', 'data', 'type=${link_type}&page=' + _page, Fn.initTable);
        };

        //创建
        Fn.create = function () {
            jr.load2('pl', 'link', 'create', 'type=${link_type}');
        };

        Fn.loadData();

        Fn.edit = function(id) {
            jr.load2('pl', 'link', 'edit', 'link_id=' +id);
        };

        var menu = {
            add: Fn.create,
            setvisible: function (id) {
                (function (_this) {
                    jr.xhr.post('?', 'module=link&action=set_visible&link_id=' + id,
                 function () {
                     showMsg2('操作成功！', function () { Fn.refresh(); });
                 });
                }(this));
            },
            //删除文档
            del: function (id) {
                if (confirm('确定删除吗?删除后将不可恢复!')) {
                    jr.xhr.jsonPost('?', 'module=link&action=delete&link_id=' + id,
                    function (json) {
                        if (json.result) {
                            Fn.loadData();
                        } else {
                            alert(json.message);
                        }
                    });
                }
            }
        };
    </script>
    $iconcss()
</body>
</html>
